<template>
	<view>
		<!-- 头部 -->
		<view class="headbox">
			<view class="headlist" :class="Opacityvalue==1?'background_chart':'white_background'">
				<view class="user-header">
					<view class="user-avatar">
						<view class="avatar-border"
							:style="Opacityvalue==1?'background-color: #ffffff;':'background-color:#737373;'">
							<view class="bg-image aratar-bg"
								style="background-image: url(&quot;https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fh25PZa6hsUOfAitWGNWNEC6IGcH.png&quot;);">
							</view>
						</view>
					</view>
					<view class="clawsa bg-image" :class="Opacityvalue==1?'clawsa-image':'clawsa-image-art'"></view>
				</view>
				<view style="flex: 1;">
					<view v-if="Opacityvalue==1" class="logo-image_white bg-image"></view>
					<view v-else class="logo-image_black bg-image"></view>
				</view>
				<view class="features-scope flex ac" style="margin-top: 5rpx;">
					<image @click="searcha" mode="widthFix" style="width: 56rpx;"
						:src="Opacityvalue==1?'../../static/icon/search.png':'../../static/icon/search-art.png'">
					</image>
					<image mode="widthFix" style="width: 56rpx;margin: 0 5rpx;"
						:src="Opacityvalue==1?'../../static/icon/customer-service.png':'../../static/icon/customer-service-art.png'">
					</image>
					<image @click="newsa" mode="widthFix" style="width: 56rpx;"
						:src="Opacityvalue==1?'../../static/icon/private-message.png':'../../static/icon/private-message-art.png'">
					</image>
				</view>
				<view class="user-balance" :style="Opacityvalue==1?'background:#aa64d1;':'background:#555;'">
					<view class="balance-num">22</view>
					<image class="u-icon"
						src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Ft4hMsaYHyVdMWvK3KQv_PkxEMOI.gif">
					</image>
				</view>
			</view>
		</view>

		<!-- 轮播图1 -->
		<view class="swiperviewbox">
			<view class="banner-bg">
				<image
					src="https://duimianimg.loovee.com/style/img/h5/ukaka/ukaka_h51705493057877/img/ukaka_sy_bg1.6fff2c3.png">
				</image>
			</view>
			<swiper class="swiper-block" previous-margin="25rpx" next-margin="239rpx" :current="indexvalue"
				autoplay="true" circular="false" duration="500" interval="6888">
				<block v-for="(item,index) in carousel" :key="index">
					<swiper-item class="swiper-box">
						<view class="slide-view">
							<image mode="aspectFill" :src="item.imageurl"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<!-- 轮播图2 -->
		<view class="lunbo">
			<view class="swiper-view">
				<swiper class="swiperfada" autoplay="true" circular="false" duration="500" interval="3888"
					@change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.imageurl" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</swiper>
				<view class="dots">
					<block v-for="(item,unique) in imgUrls" :key="unique">
						<view class="dot" :class="unique == swiperCurrent?'active':''"></view>
					</block>
				</view>
			</view>
		</view>

		<!-- 分类 -->
		<view class="hot-catchbox bg-image">
			<scroll-view class="hot-catchview" scroll-x>
				<block v-for="(item,index) in typedata" :key="index">
					<view class="hot-catchlist" @click="tabdata(index)">
						<view class="clawsahot-catchview flex jc ac fc">
							<image mode="widthFix" :src="item.imageurl"></image>
							<view class="clawsahot-catchtext">{{item.text}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<view class="spread-out"></view>

		<!-- 选择头部 -->
		<view class="tab-box">
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		</view>

		<!-- 列表数据 -->
		<view>
			<swiper class="tab-content" :autoplay="false" @change="changeSwiper" :current="current"
				:style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(item,index) in tabs" :key="index">
					<scroll-view scroll-y="true" class="scoll-h">
						<block>
							<view class="listbox" :id="'content-wrap' + index">
								<view style="height: 10rpx;"></view>
								<view class="left">
									<block v-for="(item,index) in dataList" :key="index">
										<view v-if="index%2==0" class="item">
											<view class="item-img">
												<image class="item-imgurl" :src="item.picture"></image>
												<image class="desc-bg" mode="widthFix"
													src="../../static/icon/fixed.png"></image>
											</view>
											<view class="item-title">{{item.title}}</view>
											<view class="item-platform jb">
												<view class="item-platform-left flex ac">
													<view class="flex ac">
														<text
															style="font-size: 28rpx;color:#FF411F;font-weight: 600;">25</text>
														<text style="font-size: 23rpx;color:#FF411F;">金币</text>
													</view>
													<view class="flex ac"
														style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
														<text style="font-size: 25rpx;">25</text>
														<text style="font-size: 20rpx;">金币</text>
													</view>
												</view>
												<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
												<view class="item-platform-right" style="background-color: #FF5736;">
													3台/火爆中</view>
											</view>
										</view>
									</block>
								</view>
								<view class="right">
									<block v-for="(item,index) in dataList" :key="index">
										<view v-if="index%2==1" class="item">
											<view class="item-img">
												<image class="item-imgurl" :src="item.picture"></image>
												<image class="desc-bg" mode="widthFix"
													src="../../static/icon/fixed.png"></image>
											</view>
											<view class="item-title">{{item.title}}</view>
											<view class="item-platform jb">
												<view class="item-platform-left flex ac">
													<view class="flex ac">
														<text
															style="font-size: 28rpx;color:#FF411F;font-weight: 600;">25</text>
														<text style="font-size: 23rpx;color:#FF411F;">金币</text>
													</view>
													<view class="flex ac"
														style="text-decoration:line-through;margin-left:10rpx;color:#B1B1B1;">
														<text style="font-size: 25rpx;">25</text>
														<text style="font-size: 20rpx;">金币</text>
													</view>
												</view>
												<!-- <view class="item-platform-right" style="background-color: #3CE67A;">3台/空闲中</view> -->
												<view class="item-platform-right" style="background-color: #FF5736;">
													3台/火爆中</view>
											</view>
										</view>
									</block>
								</view>
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexvalue: 0,
				carousel: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlI6ww-u76rJHyCDQ_Tcms14yuZv.png',
						id: 1,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FtJk-HhOSeCQN0bncjDSOqKAAp0Y.png',
						id: 2,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FrqX1xlVG-CUw5QcvQzWMACQDPue.png',
						id: 3,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvFbz3xxqKJzqtq2tQxcGzMd6yvA.png',
						id: 4,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fuz223ZYzslYc54IoFuq_2z9N4vf.png',
						id: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjX3hyswRMZDxtTCdpbki0buYS-u.png',
						id: 6,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvGiUtNUGyj9Fzn0MyTS8CyWoYlS.png',
						id: 7,
					},
				],
				imgUrls: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fr7qqf3UiF664RI2jQkUMoODhsSJ.png',
						id: 1,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvMRDj6m8qeaMZyAQ5u99lXfktMz.png',
						id: 2,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkbJg5Bha-hL57ddRpZXU_D6ahEI.png',
						id: 3,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FgFuBPIphYRGGP-eJH_tq3c-FAge.png',
						id: 4,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvGhgiWZRS2sN9z1lJZhfLr96OZi.png',
						id: 5,
					}
				],
				swiperCurrent: 0,
				typedata: [{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FvUUQV0mD_WxiPvjpJJ1hnipKjb-.png',
						text: '签到有奖',
						index: 1,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlgzLXfNGxUoG1zKClxTaeHLHNMr.png',
						text: '玩法机',
						index: 2,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FkdkK0aI-Nu9NJeMRpCRoLxmpBui.gif',
						text: '充值特惠',
						index: 3,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjxlBmn7vuVL8cQU0TtOQZyG2Z29.png',
						text: '邀请奖励',
						index: 4,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fmprk3w8F5nbq3ZMVcsOE7_SrXpg.png',
						text: '兑换券商城',
						index: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjGe0of95A7DPQWlLfhHLVpyofVt.png',
						text: '最强榜单',
						index: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FsfKLRMjqUrGN3WUrQcWXK_aJVrl.png',
						text: '周卡月卡',
						index: 5,
					},
					{
						imageurl: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FlMwd0Ex1cAsq0-L-NoUPfV34cPx.png',
						text: '我的娃娃',
						index: 5,
					},
				],
				current: 0,
				tabs: ['推荐', '新品推荐', '甄选公仔', '潮玩天地', '家居好物', '数码电器'],
				dataList: [{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/439721c84a1488c844399efcd0edddf7.jpg',
						title: '粉色卡皮巴拉吐泡泡挂件',
						coins: '18',
					},
					{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/15c7d414c9f46f54d83d49dc21e0a424.png',
						title: '50cm原创正版嘟嘟喵记忆棉枕头',
						coins: '18',
					},
					{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/c19d817fc2f064766ee43bbbdb6e88a4.png',
						title: '水果白面猴挂件',
						coins: '18',
					},
					{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/439721c84a1488c844399efcd0edddf7.jpg',
						title: '粉色卡皮巴拉吐泡泡挂件',
						coins: '18',
					},
					{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/ecfd1e09e11c926217cd951d41240abb.png',
						title: '70cm动物毛毛虫',
						coins: '18',
					},
					{
						picture: 'https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/a9004e737568bbe191980031ac1dfde8.png',
						title: '微笑小熊斜挎包',
						coins: '18',
					},
				],
				swiperHeight: 0, //滑块的高度(单位px)
				scrollTop: 0, //滑动参数
				Opacityvalue: 1,
			}
		},

		onLoad(e) {
			//动态设置swiper的高度
			this.$nextTick(() => {
				this.setSwiperHeight();
			});
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			// console.log(e.scrollTop, ">>>>")
			if (this.scrollTop > 200) {
				this.Opacityvalue = 0
			} else {
				this.Opacityvalue = 1
			}
		},

		methods: {
			tabdata(e){
				if(e==0){
					uni.navigateTo({
					  url: '/pages/taskcenter/taskcenter'
					})
				}
				if(e==1){
					uni.navigateTo({
					  url: '/pages/playingmethod/playingmethod'
					})
				}
				if(e==2){
					uni.navigateTo({
					  url: '/pages/charge/charge'
					})
				}
				if(e==3){
					uni.navigateTo({
					  url: '/pages/invite/invite'
					})
				}
				if(e==4){
					uni.reLaunch({
					  url: '/pages/funplay/funplay'
					})
				}
				if(e==5){
					uni.navigateTo({
					  url: '/pages/ranking/ranking'
					})
				}
				if(e==6){
					uni.navigateTo({
					  url: '/pages/charge/charge'
					})
				}
				if(e==7){
					uni.navigateTo({
					  url: '/pages/doll/doll'
					})
				}
			},
			
			searcha(e) {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			newsa(e) {
				uni.navigateTo({
					url: '/pages/informationlist/informationlist'
				})
			},

			//手动切换题目
			changeSwiper(e) {
				this.current = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.current;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},

			swiperChange(e) {
				let current = e.detail.current
				this.swiperCurrent = current
			},

			changeTab(index) {
				console.log('当前选中的项：' + index)
			}
		}
	}
</script>

<style lang="scss">
	@import url("home.css");
</style>